<template>
  <div v-show="showSelectNumber" class="select-number">
    <div class="text">请选择用餐人数</div>
    <div class="number-type">
      <span class="num"
            v-for="(item,index) in numberType"
            :key="index"
            @click="click_num(index)"
            :class="{'num-on-class':index===numOnClass}"
      >
        {{ item }}
      </span>
    </div>
    <div class="start-order" :class="{'num-on-start-order-class':isGoGoods}" @click="go_goods">开始点单</div>
    <div class="list-mask" v-show="mask">没有该餐桌请重新扫描</div>
  </div>
</template>

<script>
  import axios from 'axios';
  import {basePath} from '../api/api_const';

  export default {
    name: 'SelectNumber',
    data() {
      return {
        showSelectNumber: false,
        numberType: [],
        numOnClass: -1,
        isGoGoods: false,
        mask: false
      };
    },
    methods: {
      // 获取getWxUserInfo
      getWxUserInfo() {
        // 写死数据 start
        // localStorage.setItem('city', '');
        // localStorage.setItem('country', '');
        // localStorage.setItem('headimgurl', 'http://thirdwx.qlogo.cn/mmopen/vi_32/Aicia76LribU1pmKzTC4yClicV13A87lFKIad5xTSuj6qngHVfQBAXdCzkhPmzeYa74aAHERCibE2krTrO3ibUG9hG1w/132');
        // localStorage.setItem('nickname', '洲洲');
        // localStorage.setItem('openid', 'oswTZsyyztFf_vdj8NSrWwBEz1HI');
        // localStorage.setItem('sex', 0);
        // 写死数据 end
        let code = window.location.href.split('=')[4];
        // 如果是常宇跳转过来那么就没有code
        if (!code) {
          return;
        }
        if (localStorage.getItem('code') === null || localStorage.getItem('code') !== code) {
          localStorage.setItem('code', code);
          axios({
            method: 'get',
            url: basePath + 'send/getaccesstoken?code=' + code
          })
            .then(function (response) {
              let res = JSON.parse(response.request.response).response;
              let accessToken = res.access_token;
              let openid = res.openid;
              console.log('accessToken==>' + accessToken);
              console.log('openid==>' + openid);
              // 获取微信用户信息
              axios({
                method: 'get',
                url: basePath + 'send/getuserinfo?accessToken=' + accessToken + '&openid=' + openid
              })
                .then(function (data) {
                  let res = JSON.parse(data.request.response);
                  console.log(res);
                  localStorage.setItem('city', res.city);
                  localStorage.setItem('country', res.country);
                  localStorage.setItem('headimgurl', res.headimgurl);
                  localStorage.setItem('nickname', res.nickname);
                  localStorage.setItem('openid', res.openid);
                  localStorage.setItem('sex', res.sex);
                })
                .catch(function (err) {
                  console.log(err);
                });
            })
            .catch(function (err) {
              console.log(err);
            });
        }
      },
      // 获取二维码中传来的storeid和tableid
      getUrlInfo() {
        let urlString = window.location.href;
        let storeid = urlString.split('=')[1].split('&')[0];
        let tableid = urlString.split('=')[2].split('&')[0];
        // 判断有没有该餐桌
        axios({
          method: 'get',
          url: basePath + 'xzg_order/add_table',
          params: {
            id: `${tableid}`
          }
        })
          .then((data1) => {
            console.log(data1);
            console.log(111);
            let resss = JSON.parse(data1.request.response).response.data;
            console.log(resss);
            console.log(222);
            if (resss.length > 0) {
              // 通过tableid获取tablename
              axios({
                method: 'get',
                url: basePath + 'xzg_order/add_table?id=' + tableid
              })
                .then((data) => {
                  let res = JSON.parse(data.request.response);
                  console.log(res);
                  console.log(333);
                  let tableInfo = res.response.data;
                  // let tableCate = tableInfo[0]['table_classification'];
                  // let tableName = tableInfo[0]['table_name'];
                  // document.title = tableCate + '-' + tableName; // 替换网页title
                  document.title = tableInfo[0].ping_table_name;
                  console.log(document.title);
                  console.log(444);
                  localStorage.setItem('tablename', tableInfo[0].ping_table_name);
                  localStorage.setItem('storeid', storeid);
                  localStorage.setItem('tableid', tableid);
                  // 判断中间购物车是否存在
                  axios({
                    method: 'get',
                    url: basePath + 'xzg_order/add_order_info',
                    params: {
                      table_num: `${tableid}`
                    }
                  })
                    .then((data2) => {
                      let data2data = JSON.parse(data2.request.response).response.data;
                      // 如果该桌在购物车表中存在
                      if (data2data.length > 0) {
                        // 如果购物车表中对应餐桌人数存在
                        console.log(data2data);
                        console.log(555);
                        if (data2data[0].customer_num) {
                          localStorage.setItem('num-on-index', data2data[0].customer_num - 1);
                          console.log(666 + '设置localStorage中num-on-index');
                          // 判断该桌是否有订单
                          axios({
                            method: 'post',
                            url: basePath + 'xzg_order/query_order',
                            data: {
                              table_num: localStorage.getItem('tableid')
                            }
                          })
                            .then((data) => {
                              let ress = JSON.parse(data.request.response).response.data;
                              console.log(777);
                              if (ress.order_static === '待支付' || ress.order_static === '未支付') {
                                this.$router.push('/order'); // 如果有订单跳到订单页
                              } else if (localStorage.getItem('num-on-index') !== null) {
                                this.$router.push('/goods'); // 如果无订单有人数跳到点餐页
                              }
                              console.log('走到这里了');
                            })
                            .catch(function (err) {
                              console.log(err);
                            });
                        } else {
                          this.showSelectNumber = true; // 显示选择人数页面
                        }
                      } else {
                        // 如果不存在
                        // 新增 （如果该桌没有中间购物车那么生成一个）
                        axios({
                          method: 'post',
                          url: basePath + 'xzg_order/add_order_info',
                          data: {
                            table_num: `${tableid}`,
                            order_info: '',
                            customer_num: ''
                          }
                        })
                          .then((data3) => {
                            this.showSelectNumber = true; // 显示选择人数页面
                          })
                          .catch(function (err) {
                            console.log(err);
                          });
                      }
                    })
                    .catch(function (err) {
                      console.log(err);
                    });
                })
                .catch(function (err) {
                  console.log(err);
                });
            } else {
              // 如果没有该餐桌
              document.title = '';
              this.mask = true;
            }
          })
          .catch(function (err) {
            console.log(err);
          });
      },
      // 用于遍历人数
      number_type() {
        for (let i = 1; i <= 12; i++) {
          this.numberType.push(i)
        }
      },
      // 点击人数事件
      click_num(index) {
        if (localStorage.getItem('num-on-index') === `${index}`) {
          this.numOnClass = -1;
          this.isGoGoods = false;
          localStorage.removeItem('num-on-index');
        } else {
          this.numOnClass = index;
          this.isGoGoods = true;
          localStorage.setItem('num-on-index', index);
        }
      },
      // 去菜品页点菜
      go_goods() {
        if (this.isGoGoods) {
          // 修改中间购物车
          axios({
            method: 'post',
            url: basePath + 'xzg_order/update_order_info',
            data: {
              table_num: localStorage.getItem('tableid'),
              order_info: '',
              customer_num: localStorage.getItem('num-on-index')
            }
          })
            .then((data) => {
              console.log(data);
              console.log('将人数更新到中间购物车成功');
            })
            .catch(function (err) {
              console.log(err);
            });
          // 选好人数去菜品页
          this.$router.push('/goods');
        }
      }
    },
    // 进入加载方法
    created() {
      document.title = '';
      this.getWxUserInfo(); // 获取微信用户信息
      this.getUrlInfo(); // 获取二维码中传来的storeid和tableid
      this.number_type(); // 遍历人数
      localStorage.removeItem('num-on-index');
    }
  }
</script>

<style scoped lang="scss">
  .select-number {
    .text {
      margin: 36px 0 18px 0;
      color: #333;
      font-size: 18px;
      text-align: center;
    }
    .number-type {
      width: 100%;
      margin-top: -10px;
      overflow: auto;
      text-align: center;
      .num {
        display: inline-block;
        width: 70px;
        height: 50px;
        line-height: 50px;
        font-size: 18px;
        color: #333;
        text-align: center;
        border: 1px solid #ccc;
        border-radius: 8px;
        margin: 10px 12px;
      }
      .num-on-class {
        color: #fff;
        background: #f76763;
        border: 1px solid #f76763;
      }
    }
    .start-order {
      width: 264px;
      height: 50px;
      margin: 40px auto 0;
      border-radius: 8px;
      background: #ccc;
      line-height: 50px;
      text-align: center;
      color: #eee;
      font-size: 18px;
    }
    .num-on-start-order-class {
      color: #fff;
      background: #f76763;
    }
    .list-mask {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      line-height: 500px;
      font-size: 30px;
      text-align: center;
      color: #ccc;
      z-index: 2;
      /*opacity: 0.9;*/
      background: rgba(76, 76, 76, 0.9);
    }
  }
</style>
